<template>
  <div>
    <div v-show="isShow">
      <el-descriptions
        class="margin-top"
        title="光模块信息"
        :column="2"
        style="width: 750px"
        border
      >
        <template slot="extra">
          <el-button type="primary" size="small">刷新</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label"> 光模块类型 </template>
          {{ optModulePac.optModType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            光模块服务类型
          </template>
          {{ optModulePac.optModServiceType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 光纤类型 </template>
          {{ optModulePac.optModSingleDouble }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            发送波长
          </template>
          {{ optModulePac.optModTxWaveLength }} nm
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 接收波长 </template>
          {{ optModulePac.optModRxWaveLength }} nm
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 比特率 </template>
          {{ optModulePac.optModBitRate }} MBits/s
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 传输距离 </template>
          {{ optModulePac.optModDistance }} km
        </el-descriptions-item>

        <el-descriptions-item label-class-name="my-label"
                              content-class-name="my-content">
          <template slot="label">
            <i></i>
            <span
              title="衰减属性数据可修改"
              style="color: #0038f5; cursor: pointer"
              @click="changeRate"
              ><b>衰减</b></span
            >
          </template>
          {{ optModulePac.optModAttenuation }}&nbsp;dB
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 输入光功率 </template>
          {{ optModulePac.ddmInfoPac.inputPower }} dBm
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 输出光功率 </template>
          {{ optModulePac.ddmInfoPac.outputPower }} dBm
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 温度 </template>
          {{ optModulePac.ddmInfoPac.temperature }} ℃
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 偏置电流 </template>
          {{ optModulePac.ddmInfoPac.biasCurrent }}mA
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电压 </template>
          {{ optModulePac.ddmInfoPac.voltage }} V
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        title="供应商信息"
        :column="1"
        border
        style="width: 450px"
      >
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            供应商名称
          </template>
          {{ optModulePac.optModVendorPac.optModVendorName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            供应商PN
          </template>
          {{ optModulePac.optModVendorPac.optModVendorPN }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            供应商SN
          </template>
          {{ optModulePac.optModVendorPac.optModVendorSN }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            供应商版本号
          </template>
          {{ optModulePac.optModVendorPac.optModVendorRev }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="config_div" v-show="!isShow">
      <el-header style="background-color: #c0d5ff">光模块信息</el-header>
      <el-form
        :model="optModulePac"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="config_form"
      >
        <el-form-item label="光模块类型" prop="name">
          <el-input v-model="optModulePac.optModType"></el-input>
        </el-form-item>
        <el-form-item label="光模块服务类型" prop="source">
          <el-input v-model="optModulePac.optModServiceType"></el-input>
        </el-form-item>
        <el-form-item label="光纤类型" prop="source">
          <el-input v-model="optModulePac.optModSingleDouble"></el-input>
        </el-form-item>
        <el-form-item label="发送波长" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="接收波长" prop="source">
          <el-input v-model="optModulePac.optModRxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="比特率" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="传输距离" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="衰减" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="输入光功率" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="输出光功率" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="温度" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="偏置电流" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="电压" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>

        <el-form-item label="偏置电流" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>
        <el-form-item label="偏置电流" prop="source">
          <el-input v-model="optModulePac.optModTxWaveLength"></el-input>
        </el-form-item>

        <el-form-item label="供应商名称" prop="name">
          <el-input
            v-model="optModulePac.optModVendorPac.optModVendorName"
            readonly
          >
          </el-input>
        </el-form-item>
        <el-form-item label="供应商PN" prop="source">
          <el-input
            v-model="optModulePac.optModVendorPac.optModVendorPN"
            readonly
          >
          </el-input>
        </el-form-item>
        <el-form-item label="供应商SN" prop="source">
          <el-input
            v-model="optModulePac.optModVendorPac.optModVendorSN"
            readonly
          >
          </el-input>
        </el-form-item>
        <el-form-item label="供应商版本" prop="source">
          <el-input
            v-model="optModulePac.optModVendorPac.optModVendorRev"
            readonly
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="修改衰减值"
      :visible.sync="dialogFormVisible"
      width="400px"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">修改衰减值</div>
      </div>
      <el-form label-width="50px">
        <el-form-item label="衰减">
          <el-input v-model="optModulePac.optModAttenuation" autocomplete="off">
            <i slot="suffix" style="margin-right: 10px">dB</i>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OptPowerPac",
  data() {
    return {
      isShow: true,
      dialogFormVisible: false,
      optModulePac: {
        optModType: "CWDM",
        optModServiceType: "link",
        optModSingleDouble: "single",
        optModTxWaveLength: "2.66",
        optModRxWaveLength: "3.25",
        optModBitRate: "1.2",
        optModDistance: "10",
        //只有此项可以修改 光模块衰减，单位：dB
        optModAttenuation: "0.2",
        optModVendorPac: {
          optModVendorName: "山东华辰泰尔信息科技有限公司",
          optModVendorPN: "8088-12345678",
          optModVendorSN: "5055-123456789",
          optModVendorRev: "v1.0.0.1.2",
        },
        ddmInfoPac: {
          inputPower: "16",
          outputPower: "6",
          temperature: "28.4",
          biasCurrent: "0.81",
          voltage: 220,
        },
      },
    };
  },
  methods: {
    changeRate() {
      this.dialogFormVisible = true;
      console.log("你点击了我");
    },
  },
};
</script>

<style>
.my-label {
  background: #edfce0 !important;
}

.my-content {
  background: #edfce0;
}
</style>